<template>
  <div>
		<van-nav-bar fixed title="商品列表" left-arrow @click-left="close" />
		<div fixed class="order_search pd-24 bg-white">
			<div  class="bg-white flex-v-c pos-r search">
				<van-field
					v-model="searchKey"
					class="flex-1"
					clearable
					placeholder="请输入商品名称"
					left-icon="search"
					@click-left-icon="search"
					@keyup.enter="search"
				/>
				<div class="pos-a right-20 fs-26" @click="search">搜索</div>
			</div>	
		</div>
		<div class="main">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="moreData">
				<van-checkbox-group v-model="checkedList">
					<div class="flex flex-s-c checkAll">
						<p class="checkbox mg-24" :class="checkAllState?'checked':''" @click="checkAll">全选</p>
						<p class="submitBtn" @click="submit">确定</p>
					</div>
					<div v-for="(item,index) in productList" :key="index" class="flex product">
						<div class="w-50 flex"><van-checkbox :name="item.ID" checked-color="#2cd334" @click="checkEdit(item)" />	</div>
						<div><img-box class="productImg br-12 ofh" :img-url="item.ThumbnailUrl410" /></div>
						<div class="fs-28 productName">
							<div class="text-show-line-2">{{ item.ProductName }}</div>
							<div>{{ item.ProductCategoryName }}</div>
						</div>
					</div>
				</van-checkbox-group>
				<div class="no-data pb-0" v-if="blank">
						<svg-icon icon-class="no-data" />
				</div>
			</van-list>
		</div>
		
		
	</div>
</template>
<script>
import { GetStoreSupplierProductPage } from 'api/teaHouse'
import imgBox from 'components/imgBox'
export default ({
	components:{
		imgBox
	},
	props:{
		productIds: {
			type: Array,
      required: false,
      default: []
		},
		productNames: {
			type: Array,
      required: false,
      default: []
		}
	},
	data(){
		return {
			loading: false, // 加载load
			finished: false, // 无更多数据
			blank: false, // 是否为空数据
			requestData:{ 
				IsFutures: 7,
				SaleStatus: 1,
				Status: 2,
				PageIndex: 1,
				PageSize: 7,
			},
			productList: [],
			searchKey: '',
			checkAllState: false,
			editIds: '',
			checkedList: [],
		}
	},
	created(){
		this.GetStoreSupplierProductPage()
		this.checkedList = this.productIds
		this.productNameList = this.productNames
	},
	mounted(){
		
	},
	methods: {
		close(){
			this.$emit('close')
		},
		search() {
			this.resetParams()
      this.requestData.ProductName = this.searchKey
			this.GetStoreSupplierProductPage()
    },
		resetParams() {
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 7
      this.productList = []
      this.totalAmout = 0
      this.scollRequest = true
      this.scollTop = 0
      this.end = false
    },
		// 上拉加载更多
		moreData() {
      this.requestData.PageIndex = this.requestData.PageIndex + 1
      this.GetStoreSupplierProductPage()
    },
		GetStoreSupplierProductPage(){
			const _this = this
			_this.loading = true
			GetStoreSupplierProductPage(this.requestData).then(res =>{
				if (_this.requestData.PageIndex >= res.TotalAmout) {
            _this.finished = true
        } else {
          _this.finished = false
        }
				_this.loading = false
        if (res && res.Data && res.Data.length > 0) {
          res.Data.forEach(item => {
            item.show = false
            _this.productList.push(item)
          })
        }
        _this.totalAmout = res.TotalAmout
        _this.scollRequest = true
        if (_this.scollTop > 0) {
          document.body.scrollTo(0, _this.scollTop)
        }
      })
		},
		toggleSelection(rows) {
			if (rows) {
				rows.forEach(row => {
					this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
    },
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		// 选择/不选（编辑）
		checkEdit(item){		
			this.checkAllState = this.isCheckAll()
			if(this.productNameList.indexOf(item.ProductName) === -1){
				this.productNameList.push(item.ProductName)
			}else{
				this.productNameList.splice(this.productNameList.indexOf(item.ProductName),1)
			}
		},   

		// 全选、全不选
    checkAll() {
			this.checkAllState = !this.checkAllState
      this.setEditCheck(this.checkAllState)
      this.$forceUpdate()
    },
		// 设置全选、全不选（编辑）
		setEditCheck(bol) {
      const _this = this
      _this.editIds = ''
			this.checkedList = []
			this.productNameList = []
      if (_this.productList && _this.productList.length > 0) {
        _this.productList.forEach(item => {
          item.check = bol
					if(bol){
						_this.editIds += (item.ID + ',')
						this.checkedList.push(item.ID)
						this.productNameList.push(item.ProductName)
					}
				
        })
      }
			console.log(bol,_this.editIds,"是实时")
    },
		// 判断是否全选
    isCheckAll() {
      let isCheckAll = false
			if(this.productList && this.checkedList && this.productList.length == this.checkedList.length){
				isCheckAll = true
			}			
      return isCheckAll
    },
		submit(){
			console.log(this.productNameList,"返回")
			if(this.checkedList.length > 0){
				this.$emit('choose',this.checkedList,this.productNameList)
			}else{
				this.$toast('请选择商品')
			}
		}
	}
})
</script>
<style lang="scss" scoped>
	
	.search{
		height: 64px;
		background: #FFFFFF;
		border-radius: 41px;
		border: 1px solid $primary15;
		margin-right: 24px;
		padding: 0 10px;
		width: 100%;
	}
	.pos-a{
		background: $primary15;
		color: #fff;
		padding: 3px 20px;
		border-radius: 20px;
	}
	.van-cell{
		padding: 0 12px;
	}
	.van-cell::after{
		border-bottom:none
	}
	.product{
		padding: 24px;
		border-radius: 30px;
		border: 1px solid #f2f2f2;
		margin: 24px;
	}
	.productImg{
		width: 200px;
		height: 200px;
		margin: 0 24px;
	}
	/deep/.van-checkbox{
		margin-bottom: 0 !important;
	}
	.checkbox{
		padding-left: 75px;
		padding-right: 75px;
		&:before{
			left: 23px;
		}
		&:after{
			left: 35px;
		}
	}
	.productName{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 12px 0;
	}
	.submitBtn{
		width: 100px;
		margin-right: 48px;
		background: $primary15;
    color: #fff;
    text-align: center;
    font-size: 28px;
    padding: 5px 10px;
    border-radius: 24px;
	}
	.order_search{
		position: fixed;
    top: 86px;
    width: 100%;
		z-index: 3000;
	}
	.checkAll{
		position: fixed;
    top: 198px;
    width: 100%;
		background: #fff;
		z-index: 3000;
	}
	.main{
		margin-top: 20px;
	}
</style>

